{% extends "user.html" %}
{% load custom_filters %}

{% block title %} {{ learning_module.name }} {% endblock %}

{% block main %}
<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <a class="text-light" href="{% url 'yaksh:course_modules' course.id %}">
                {{course.name}}
            </a>
        </div>
        {% for module in all_modules %}
            <div id="accordian">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-10">
                                <a href="{% url 'yaksh:view_module' module.id course.id %}">
                                    {{module.name}}
                                    {% if learning_module.id == module.id %}
                                    <i class="fa fa-edit"></i>
                                    {% endif %}
                                </a>
                            </div>
                            <div class="col-md-2">
                                <a class="card-link" data-toggle="collapse" href="#collapse{{module.id}}">
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    {% if learning_module.id == module.id %}
                        <div id="collapse{{module.id}}" class="collapse show" data-parent="#accordion">
                    {% else %}
                        <div id="collapse{{module.id}}" class="collapse hide" data-parent="#accordion">
                    {% endif %}
                        <div class="card-body">
                            {% for unit in module.get_learning_units %}
                                {% get_unit_status course module unit user as status %}
                                {% if unit.type == "quiz" %}
                                    <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="list-group-item">
                                        {% if status == "completed" %}
                                          <i class="fa fa-check-square"></i>
                                        {% else %}
                                          <i class="fa fa-square-o"></i>
                                        {% endif %}
                                        {{ unit.quiz.description }}
                                    </a>
                                {% else %}
                                    <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="list-group-item">
                                        {% if status == "completed" %}
                                          <i class="fa fa-check-square"></i>
                                        {% else %}
                                          <i class="fa fa-square-o"></i>
                                        {% endif %}
                                        {{ unit.lesson.name }}
                                        {% if unit.id == current_unit.id %}
                                            <i class="fa fa-play-circle" data-toggle="tooltip" title="Currently on">
                                            </i>
                                        {% endif %}
                                    </a>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </nav>

    <!-- Page Content  -->
    <div id="content">

        <button type="button" id="sidebarCollapse" class="btn btn-outline-info">
            <i class="fa fa-navicon fa-lg"></i>
        </button>

        <br><br>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                {{course.name}}
            </li>
            <li class="breadcrumb-item">
                {{ learning_module.name }}
            </li>
            {% if state == "lesson" %}
                <li class="breadcrumb-item active">{{lesson.name}}</li>
            {% endif %}
        </ol>
        <br>

        {% if msg %}
            <center>
                <div class="alert alert-dismissible alert-warning">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="fa fa-close"></i>
                    </button>
                    <strong>{{ msg }}</strong>
                </div>
            </center>
        {% endif %}


        {% if state == "module" %}  <!-- Module instructions body -->
            {% if learning_module.html_data %}
                {{learning_module.html_data|safe}}
            {% else %}
                No Module information
            {% endif %}
            <br>
            {% if first_unit %}
                <a href="{% url 'yaksh:next_unit' course.id learning_module.id first_unit.id '1' %}" class="btn btn-success btn-lg">Start
                    <i class="fa fa-play">
                    </i>
                </a>
            {% else %}
                <a href="{% url 'yaksh:next_unit' course.id learning_module.id %}" class="btn btn-success btn-lg">Next
                    <i class="fa fa-step-forward">
                    </i>
                </a>
            {% endif %}
        {% else %}    <!--  Lesson body   -->
            <div class="col-md-6" style="width: 100%">
            {{lesson.html_data|safe}}
            <br>
            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
                Next&nbsp;<i class="fa fa-step-forward"></i>
            </a>
            </div>
            <br>
            <div class="col-md-7">
            {% with lesson.get_files as lesson_files %}
                {% if lesson_files %}
                    <div class="card">
                        <div class="card-header">
                            Files for this lesson
                        </div>
                        <div class="card-body">
                            {% for f in lesson_files %}
                                <a href="{{f.file.url}}" class="list-group-item">
                                    {{forloop.counter}}.{{ f.file.name|file_title }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endwith %}
            </div>
        {% endif %}
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
    });
</script>
{% endblock %}

